<style type="text/css">
  .qrcode {
    position: relative;
    width: 100px;
  }

  .qrcode .sizes {
    position: absolute;
    top: -78px;
    padding: 5px;
    background: #fff;
    border: 1px solid #ddd;
    display: none;
  }

  .qrcode:hover .sizes {
    display: block;
  }

  .qrcode .line {
    display: block;
    width: 100px;
    text-align: center;
  }

  .home-page-content {
    height: 100%;
    width: 100%;
    background: #f3f3f3;
    display: flex;
    padding: 15px;
    color: #111;
    overflow-y: auto;
  }

  .home-page-vue .left-item-wraper {
    width: 25%;
    min-height: 100%;
  }

  .home-page-vue .right-item-wraper {
    width: 25%;
    min-height: 100%;
  }

  .home-page-vue .map-wraper {
    width: 50%;
    margin: 0 15px;
    min-height: 100%;
    border-radius: 5px;
  }

  .home-page-vue .map-wraper .map-box {
    background: #fff;
    height: calc(100% - 215px);
    margin-bottom: 18px;
  }

  .home-page-vue .left-top-box {
    background: #fff;
    border-radius: 5px;
    margin-bottom: 15px;
  }

  .home-page-vue .left-top-box .item-box {
    display: flex;
    padding: 15px 30px;
  }

  .home-page-vue .left-top-box .item-box img {
    width: 20%;
  }

  .home-page-vue .left-top-box .item-box .item {
    width: 40%;
    margin-left: 8%;
  }

  .home-page-vue .left-top-box .item-box .item .name {

  }

  .home-page-vue .left-top-box .item-box .item .num {
    font-size: 16px;
    color: #4e9de7;
  }

  .home-page-vue .left-top-box .item-box .item .num span {
    font-size: 22px;
    margin-right: 5px;
  }

  .home-page-vue .left-item-wraper .charts-box-wraper {
    padding-bottom: 15px;
  }

  .home-page-vue .charts-box-wraper2 {
    display: flex;
  }

  .home-page-vue .bar-box-wraper {
    background: #fff;
    border-radius: 5px;
    padding: 15px 15px 15px 15px;
    height: 365px;
    margin-bottom: 15px;
  }

  .home-page-vue .bar-box-wraper2 {

    height: 182px;
    margin-bottom: 15px;
    display: flex;
    flex: 1;
    background: #f3f3f3;
  }

  .home-page-vue .bottom-bar-box {
    height: 182px;
    background: #fff;
    border-radius: 5px;
    padding: 15px 15px 15px 15px;
  }

  .home-page-vue .bar-box-wraper .bar-box {
    height: 49%;
    margin-bottom: 5%;
  }

  .home-page-vue .bar-box-wraper2 .bar-box {
    height: 100%;
    margin-bottom: 5%;
    width: 100%;
    background: #fff;
    border-radius: 5px;
    padding: 15px 15px 15px 15px;
  }

  .home-page-vue .bottom-bar-box .bar-title {
    font-size: 18px;
    line-height: 1;
    padding-left: 5px;
    border-left: 3px solid #4598e5;
  }

  .home-page-vue .bottom-bar-box .bar-box {
    height: 100%;
  }

  .home-page-vue .bar-box-wraper .bar-box .bar-title {
    font-size: 18px;
    line-height: 1;
    padding-left: 5px;
    border-left: 3px solid #4598e5;
  }

  .home-page-vue .bar-box-wraper2 .bar-box .bar-title {
    font-size: 18px;
    line-height: 1;
    padding-left: 5px;
    border-left: 3px solid #4598e5;
  }

  .home-page-vue .pie-box-wraper {
    height: 205px;
    background: #fff;
    border-radius: 5px;
    padding: 15px 15px 15px 15px;
  }

  .home-page-vue .pie-box-wraper .pie-box {
    height: 100%;
  }

  .home-page-vue .pie-box-wraper .pie-title {
    font-size: 18px;
    line-height: 1;
    padding-left: 5px;
    border-left: 3px solid #4598e5;
  }

  .home-page-vue .home-header {
    height: 100px;
    display: flex;
    background: url("../../assets/images/comment/bg.png") left top no-repeat;
    background-size: 100% 100%;
    color: #fff;
    align-items: center;
  }

  .home-page-vue .home-header .time-box {
    display: flex;
    width: 250px;
    padding-left: 30px;
    align-items: center;
  }

  .home-page-vue .home-header .time-box .time {
    font-size: 24px;
    margin-right: 15px;
  }

  .home-page-vue .home-header .time-box .year-box {
    line-height: 1;
    font-size: 18px;
  }

  .home-page-vue .home-header .time-box .year-box p {
    margin: 0;
  }

  .home-page-vue .home-header .time-box .year-box .year {
    margin-bottom: 10px;
  }

  .home-page-vue .home-header .home-title {
    text-align: center;
    font-size: 30px;
    flex-grow: 1;
  }

  .home-page-vue .home-header .home-icon {
    width: 100px;
    text-align: center;
    color: #fff;
    font-size: 26px;
  }

  .home-page-vue .line-box {
    height: 240px;
    background: #fff;
    border-radius: 5px;
    padding: 15px 15px 15px 15px;
  }

  .home-page-vue .monitoring-box {
    height: calc(100% - 285px);
    background: #fff;
    border-radius: 5px;
    margin-top: 15px;
    clear: both;
  }

  .home-page-vue .monitoring-box .monitoring-item {
    width: 50%;
    padding: 10px;
    margin-bottom: 10px;
    float: left;
  }

  .home-page-vue .monitoring-box .monitoring-item img {
    width: 100%;
  }

  .home-page-vue .wrapper-content {
    padding: 15px;

  }
</style>
<template>
  <div class="home-page-vue">
    <div class="home-header">
      <div class="time-box">
        <span class="time" v-text="nowTime">12:12:12</span>
        <div class="year-box">
          <p class="year" v-text="nowYear">2020-02-02</p>
          <p class="week" v-text="nowWeek">星期四</p>
        </div>
      </div>
      <div class="home-title">资中县河长制湖长制管理信息系统</div>
      <div class="home-icon"><span @click="goToZhongHe" style="cursor: pointer;"
                                   class="glyphicon glyphicon-home"></span></div>
    </div>
    <div class="wrapper wrapper-content animated fadeInRight home-page-content">
      <!-- <img src="../../assets/images/首页.gif" width="100%" height="50%"/> -->
      <div class="left-item-wraper">
        <div class="left-top-box">
          <div class="item-box">
            <img src="../../assets/images/icon/11.png">
            <div class="item">
              <p class="name">河段总数</p>
              <p class="num"><span>{{statsRiver}}</span>条</p>
            </div>
            <div class="item">
              <p class="name">湖库总数</p>
              <p class="num"><span>{{statsRreservoir}}</span>个</p>
            </div>
            <div class="item">
              <p class="name">渠道总数</p>
              <p class="num"><span>{{statsChannel}}</span>个</p>
            </div>
          </div>
          <div class="item-box">
            <img src="../../assets/images/icon/12.png">
            <div class="item">
              <p class="name">河长总数</p>
              <p class="num"><span>{{statsRiverSupervisor}}</span>人</p>
            </div>
            <div class="item">
              <p class="name">在线河长</p>
              <p class="num"><span>{{statsOnline}}</span>人</p>
            </div>
          </div>
        </div>
        <div class="charts-box-wraper">
          <div class="bar-box-wraper">
            <div class="bar-box">
              <p class="bar-title">{{yearNum}}年河长巡查率前5名</p>
              <chart-bar v-if="hasStats.statsInspectionRate0" :value="statsInspectionRate0"></chart-bar>
            </div>
            <div class="bar-box">
              <p class="bar-title">{{yearNum}}年河长巡查率后5名</p>
              <chart-bar v-if="hasStats.statsInspectionRate1" :value="statsInspectionRate1"></chart-bar>
            </div>
          </div>
          <!-- <div class="bottom-bar-box">
            <div class="bar-box">
              <p class="bar-title">生态流量统计（降水量）</p>
              <chart-bar2 :value="statsPrecipitation"></chart-bar2>
            </div>
          </div> -->
          <div class="pie-box-wraper">
            <div class="pie-box">
              <p class="pie-title">公共投诉统计</p>
              <chart-pie v-if="hasStats.statsComplaint" :colorA="color1" :value="statsComplaint"></chart-pie>
            </div>
          </div>
        </div>
      </div>
      <div class="map-wraper">
        <div class="map-box" id="mapDiv">

        </div>
        <div class="charts-box-wraper2">
          <div class="bar-box-wraper2">
            <div class="bar-box" style="margin-right:10px">
              <p class="bar-title"><span v-text="yearNum"></span>年河长考核前5名</p>
              <chart-bar-value v-if="hasStats.statsExamine0" :value="statsExamine0"></chart-bar-value>
            </div>
            <div class="bar-box" style="margin-left:10px">
              <p class="bar-title"><span v-text="yearNum"></span>年河长考核后5名</p>
              <chart-bar-value v-if="hasStats.statsExamine1" :value="statsExamine1"></chart-bar-value>
            </div>
          </div>
        </div>
      </div>
      <div class="right-item-wraper">
        <div class="line-box">
          <p class="line-title">生态流量统计
            <select v-model="hpCd" @change="getFlowStat">
              <option value="511025000004">头滩水电站</option>
              <option value="511025000019">五里店水电站</option>
            </select>
          </p>
          <chart-line v-if="hasStats.statsPrecipitation" :colorA="color2" :value="statsPrecipitation"></chart-line>
        </div>
        <div class="monitoring-box" style="height: calc(100vh - 400px);overflow-y: auto">
          <div class="monitoring-item" v-for="(item,i) in videoList">
            <template>
              <span v-text="item.hpNm">123</span>
              <img v-if="item.camIndexCode != null && item.hpCd !== '511025000019' && item.hpCd !== '511025000016' && item.hpCd !== '511025000009'"
                   :src="`//39.98.203.5:9090/web/wrHpB/latelyPicture/${item.hpCd}`" :title="item.hpNm" :alt="item.hpNm"
                   @click="playVideo(item.hpNm, item.hpCd, item.camIndexCode, item.camSecretCode, videoToken)"
                   style="cursor: pointer;width: 208px;height: 117px">
              <img v-else
                   :src="require('@/assets/images/video.png')" :title="item.hpNm" :alt="item.hpNm"
                   @click="playVideo(item.hpNm, item.hpCd, item.camIndexCode, item.camSecretCode, videoToken)"
                   style="cursor: pointer;width: 208px;height: 117px">
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  import '@/assets/css/style.css'
  import '@/assets/js/datepicker-vendor.js'
  import '@/assets/js/pageTag'
  // import $ from '@/assets/js/jquery-vendor.js'
  import axios from 'axios';
  import {mapGetters} from 'vuex'
  import Swal from 'sweetalert2'
  import {axiosContentType, site} from '@/assets/js/boss'

  import chartPie from '@/components/charts/pie.vue'
  import chartLine from '@/components/charts/line.vue'
  import chartBar from '@/components/charts/bar.vue'
  import chartBar2 from '@/components/charts/bar2.vue'
  import chartBarValue from '@/components/charts/barValue.vue'

  export default {
    components: {
      chartPie,
      chartBar,
      chartBar2,
      chartLine,
      chartBarValue
    },
    data() {
      return {
        hpCd: '511025000004',
        color1: ['#50b5ed', '#5083ed', '#ed9750', '#d8d8d8'],
        color2: ['#ff6a64', '#09e0ff', '#6754dc'],
        hasStats: {
          statsPrecipitation: false,
          statsInspectionRate0: false,
          statsInspectionRate1: false,
          statsExamine0: false,
          statsExamine1: false,
          statsComplaint: false
        },
        statsRiver: 0, // 河段总数
        statsChannel: 0, // 渠道总数
        statsRreservoir: 0, // 湖库总数
        statsRiverSupervisor: 0, // 河长总数
        statsOnline: 0, // 在线河长
        statsPrecipitation: { // 生态流量统计（降水量）
          '1月': 7164,
          '2月': 7164,
          '3月': 7164,
          '4月': 7128,
          '5月': 7200,
          '6月': 7056,
          '7月': 7020,
          '8月': 7128,
          '9月': 7056,
          '10月': 7056,
          '11月': 7056,
          '12月': 7128
        },
        statsInspectionRate0: { // 河长巡查率 0:前5名
          '无数据1': 0,
          '无数据2': 0,
          '无数据3': 0,
          '无数据4': 0,
          '无数据5': 0
        },
        statsInspectionRate1: { // 河长巡查率 1:后5名
          '无数据1': 0,
          '无数据2': 0,
          '无数据3': 0,
          '无数据4': 0,
          '无数据5': 0
        },
        statsExamine0: { // 河长考核 0:前5名
          '无数据1': 0,
          '无数据2': 0,
          '无数据3': 0,
          '无数据4': 0,
          '无数据5': 0
        },
        statsExamine1: { // 河长考核 1:后5名
          '无数据1': 0,
          '无数据2': 0,
          '无数据3': 0,
          '无数据4': 0,
          '无数据5': 0
        },
        statsComplaint: [ // 公共投诉
          {value: 0, name: '无'}
        ],
        examineYear: null,
        videoToken: '',
        videoList: [],
        showModal: false,
        nowYear: null,
        nowWeek: null,
        nowTime: null,
        yearNum: null
      }
    },
    mounted() {
      let that = window.$vueApp = this;
      this.loadTime();
      // 地图加载
      this.$store.dispatch('Init_Api').then(res => {
        that.mapLoad();
      });
      axios.get('//39.98.203.5:9090/web/videoToken/getToken').then(function (result) {
        that.videoToken = result.data.data.token
        // console.log(JSON.stringify(result.data.data))
      });
      axios.get('//39.98.203.5:9090/web/hpDev/list?pageNum=1&pageSize=100').then(function (result) {
        // console.log(JSON.stringify(result.data.data.list))
        that.videoList = result.data.data.list
      });
      that.getFlowStat();
      that.getStatsAll();
    },
    computed: {
      ...mapGetters([
        'TDTWMTSLayer', 'Extent', 'Map', 'GraphicsLayer', 'TDTLyr', 'TDTAnnoLayer', 'ArcGISDynamicMapServiceLayer'
      ])
    },
    methods: {
      loadTime() {
        let that = this;
        let moment = require('moment');
        let date = new Date();
        // 年份
        that.yearNum = moment(date).format('YYYY');
        // 显示日期
        that.nowYear = moment(date).format('YYYY-MM-DD');
        // 显示星期几
        that.nowWeek = '星期' + '日一二三四五六'.charAt(date.getDay());
        // 显示时间
        that.nowTime = moment(date).format('HH:mm:ss');
        setInterval(() => {
          that.nowTime = moment(new Date()).format('HH:mm:ss');
        }, 1000);
      },
      getStatsAll() { // 综合统计
        let that = this;
        axios.post(site.stats.all
          , {}
          , axiosContentType.xWwwFormUrlencoded
        ).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            var dataMap = result.data;
            // 河段总数
            that.statsRiver = dataMap.statsRiver;
            // 渠道总数
            that.statsChannel = dataMap.statsChannel;
            // 湖库总数
            that.statsRreservoir = dataMap.statsRreservoir;
            // 河长总数
            that.statsRiverSupervisor = dataMap.statsRiverSupervisor;
            // 在线河长
            that.statsOnline = dataMap.statsOnline;
            // 河长巡查率 /0:前5名
            that.hasStats.statsInspectionRate0 = true;
            if (dataMap.statsInspectionRate0) {
              let rate = dataMap.statsInspectionRate0;
              let data = {};
              for (let i = 0; i < rate.length; i++) {
                let name = rate[i].areaName;
                let val = rate[i].rate;
                data[name] = val;
              }
              that.statsInspectionRate0 = data;
            }
            // 河长巡查率 /1:后5名
            that.hasStats.statsInspectionRate1 = true;
            if (dataMap.statsInspectionRate1) {
              let rate = dataMap.statsInspectionRate1;
              let data = {};
              for (let i = 0; i < rate.length; i++) {
                let name = rate[i].areaName;
                let val = rate[i].rate;
                data[name] = val;
              }
              that.statsInspectionRate1 = data;
            }
            // 河长考核 /0:前5名
            that.hasStats.statsExamine0 = true;
            if (dataMap.statsExamine0) {
              that.statsExamine0 = dataMap.statsExamine0;
            }
            // 河长考核 /1:后5名
            that.hasStats.statsExamine1 = true;
            if (dataMap.statsExamine1) {
              that.statsExamine1 = dataMap.statsExamine1;
            }
            that.examineYear = dataMap.examineYear;
            // 公共投诉
            that.hasStats.statsComplaint = true;
            if (dataMap.statsComplaint) {
              that.statsComplaint = dataMap.statsComplaint;
            }
            // 生态流量统计（降水量）
            that.hasStats.statsPrecipitation = true;
            if (dataMap.statsPrecipitation) {
              that.statsPrecipitation = dataMap.statsPrecipitation;
            }
          } else {
            Swal.fire(result.message);
          }
        }).catch(err => {
          console.error(err);
          that.hasStats.statsInspectionRate0 = true;
          that.hasStats.statsInspectionRate1 = true;
          that.hasStats.statsExamine0 = true;
          that.hasStats.statsExamine1 = true;
          that.hasStats.statsComplaint = true;
          that.hasStats.statsPrecipitation = true;
          Swal.fire(err.message);
        });
      },
      goToZhongHe() {
        this.$router.push({
          name: 'Index'
        })
      },
      playVideo(title, code, indexCode, secretCode, token) {
        // let that = this;
        let name = '视频查看';    // 网页名称，可为空;
        let iWidth = 800;         // 弹出窗口的宽度;
        let iHeight = 600;        // 弹出窗口的高度;
        // 获得窗口的垂直位置
        let iTop = (window.screen.availHeight - 30 - iHeight) / 2;
        // 获得窗口的水平位置
        let iLeft = (window.screen.availWidth - 10 - iWidth) / 2;
        let url = `ezopen://${secretCode}@open.ys7.com/${indexCode}/1.hd.live`;
        // let url = `ezopen://open.ys7.com/${indexCode}/1.hd.live`;
        let accessToken = token;
        let iframeUrl = `https://open.ys7.com/ezopen/h5/iframe?url=${url}&autoplay=1&accessToken=${accessToken}`
        window.open(iframeUrl, name, 'height=' + iHeight + ',,innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',status=no,toolbar=no,menubar=no,location=no,resizable=no,scrollbars=0,titlebar=no');
      },
      mapLoad: function () {
        // 地图相关操作
        var map;
        /*
               * 初始化地图控件，并大致指定地图显示范围为资中
               */
        map = new this.Map('mapDiv', {
          logo: false,
          slider: false,
          nav: false,
          zoom: 10,
          showLabels: true, // 非常重要；显示标注用
          extent: new this.Extent({
            xmin: 104.253301,
            ymin: 29.461215,
            xmax: 105.336828,
            ymax: 30.138248,
            spatialReference: {
              wkid: 4490
            }
          })
        });
        map.disableScrollWheelZoom(); // 禁止鼠标滚轮缩放地图
        map.disableDoubleClickZoom(); // 禁止双击地图放大
        // map.disableInertia(); // 禁止鼠标地图惯性拖拽
        var layer = new this.ArcGISDynamicMapServiceLayer(window.map_arcgis + '/rest/services/XXZQH/MapServer', {
          'id': '资中县行政区划'
        });
        map.addLayer(layer, 5);
      },
      // 电站流量统计图数据
      getFlowStat: function() {
        let that = this;
        let moment = require('moment');
        document.cookie = 'hzbBs=true;';
        axios.post(`//39.98.203.5:9090/web/flow/list?pageNum=1&pageSize=10&sortColumn=createTime&sortDir=desc&hpCd=${that.hpCd}`,
          {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}
          ).then(function (result) {
          if (result.status === 200 && result.data.code === 0) {
            let map = {};
            var list = result.data.data.list.reverse();
            for (let i in list) {
              let time = moment(list[i].createTime).format('HH:mm:ss');
              let val = Number(list[i].flow);
              map[time] = val;
            }
            that.statsPrecipitation = map;
          }
        });
      }
    }
  }
</script>
